<template>
  <div>
    <div class="header-login-bar">
      <div class="container container-width flex v-align-c height-38 position-r">
        <div class="flex-item font-12 flex v-align-c">
          <img v-if="phoneIcon" :src="phoneIcon" alt="" class="height-13 mar-l-3 mar-r-2">
          <span class="mar-r-13" v-if="enterpriseConfig && enterpriseConfig.websiteWechatAccountQrCodeUrl">公众号</span>
          <span>欢迎来到</span>
          <span class="font-red mar-r-16">{{ enterpriseConfig ? enterpriseConfig.websiteTitle : ''}}</span>
          <template v-if="!loginUserObj">
            <span class="mar-r-16 cursor-p" @click="login">请登录</span>
            <span class="font-red cursor-p" @click="register">免费注册</span>
          </template>
          <template v-else>
            <span class="mar-r-16 cursor-p">{{ loginUserObj.phone }}</span>
            <span class="font-red cursor-p" @click="handleLoginOut">退出</span>
          </template>
        </div>
        <div class="font-12 r-link pad-r-7">
          <el-menu class="el-menu-box" background-color="#F6F6F6" text-color="#333" active-text-color="#333"
            mode="horizontal">
            <template v-for="(item, index) in dataList" :key="item.componentGuideId">
              <el-sub-menu :index="(index + 100).toString()" v-if="item.childrenList && item.childrenList.length > 0">
                <template #title>{{item.text}}</template>
                <el-menu-item :index="(index + 100).toString() + '-' + subIndex"
                  v-for="(itemSub,subIndex) in item.childrenList" @click="handleJumpPage(itemSub)">
                  {{ itemSub.text }}
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item :index="(index + 100).toString()" v-else @click="handleJumpPage(item)">{{item.text }}
              </el-menu-item>
            </template>
          </el-menu>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import phoneIcon from '@/assets/images/icon_phone.png'
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    useState
  } from '@/store/utils/useState'
  import {
    useActions
  } from '@/store/utils/useActions'
  import {
    loginOut
  } from '@/api/loginOrRegister/login'
  import {
    getNavigationBarList
  } from '@/api/common/navigationBar'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  export default defineComponent({
    name: 'HeaderLogin',
    setup() {
      const router = useRouter()

      const storeState = useState('user', ['loginUserObj'])
      const storeActions: any = useActions('user', ['setLoginUserObj'])

      const enterpriseConfigStoreState = useState('enterpriseConfig', ['enterpriseConfig'])

      onMounted(() => {
        initNavigationBarList()
      })
      const login = () => {
        router.push('/login')
      }
      const register = () => {
        router.push('/register')
      }
      const handleLoginOut = () => {
        console.log('登出')
        loginOut().then(response => {
          storeActions.setLoginUserObj(null)
          window.location.reload()
        })
      }
      // 获取导航栏列表
      const dataList = ref( < any > [])
      const initNavigationBarList = () => {
        getNavigationBarList(98).then(response => {
          dataList.value = response.data
        })
      }

      const handleJumpPage = (item: any) => {
        jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
      }

      return {
        phoneIcon,
        login,
        register,
        handleLoginOut,
        ...storeState,
        ...storeActions,
        ...enterpriseConfigStoreState,
        dataList,
        handleJumpPage
      }
    }
  })
</script>

<style lang="scss" scoped>
  .header-login-bar {
    background: url('@/assets/images/heard_login_bg.png') repeat-x;

    .container {
      .r-link {
        width: 880px;
        position: absolute;
        right: 0;
        top: 0;

        &:after {
          content: '';
          display: block;
          position: absolute;
          right: 7px;
          top: 0;
          width: 3px;
          height: 38px;
          background: url('@/assets/images/heard_login_bg.png') repeat-x;
        }

        ::v-deep(.el-menu-box) {
          &:before {
            content: '';
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
          }

          &.el-menu.el-menu--horizontal {
            border-bottom: none !important;
            background-color: transparent !important;
          }

          .el-menu-item,
          .el-sub-menu__title,
          &.el-menu--horizontal>.el-menu-item,
          &.el-menu--horizontal>.el-sub-menu .el-sub-menu__title,
          .el-menu-item,
          .el-sub-menu__title {
            height: 38px !important;
            line-height: 38px !important;
            font-size: 12px !important;
            background-color: transparent !important;
            position: relative;

            &:after {
              content: '';
              display: block;
              position: absolute;
              right: 0;
              top: 50%;
              height: 14px;
              width: 1px;
              background: #c8c8c8;
              margin-top: -7px;
            }
          }

          .el-sub-menu:hover .el-sub-menu__title:before {
            // background: #F6F6F6 !important;
          }

          &.el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title,
          &.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover {
            color: #333 !important;
            // background: #F6F6F6 !important;
          }

          .el-sub-menu__title i {
            color: #333 !important;
          }

          .el-sub-menu__title,
          .el-menu-item {
            padding: 0 15px !important;
          }

          &.el-menu--horizontal>.el-menu-item.is-active {
            border-bottom: transparent !important;
          }
        }
      }
    }
  }
</style>
